---
title: "Accessibility Checker Rule Help: RPT_Table_DataHeadingsAria"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### Who does this affect?


* Blind people using screen readers
* People with low vision using screen readers


### Why is this important?

Data tables are used to display relational data. Associating data cells with appropriate headers allows assistive technologies to announce the header(s) for each data cell so a user can understand the complex relationship of the tabular data.

</Column>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

<div id="locLevel"></div>

### Table has no headers identified
Data table must identify headers

[IBM 1.3.1 Info and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html) | [WCAG 2.1 technique H43](https://www.w3.org/WAI/WCAG21/Techniques/html/H43) | [WCAG 2.1 technique H63](https://www.w3.org/WAI/WCAG21/Techniques/html/H63)

<div id="locSnippet"></div>

### What to do

 * If this is not a data table (no relational data), use CSS instead of a `<table>` element to lay out your content (highly recommended); 
 * OR, identify the table as layout with `role="presentation"`  or `role="none"`;
 * OR, if this is a simple data table, use the `<th>` element to identify headers in the first row;
 * OR, if this is complex data table, add the `scope` attribute to the `<th>` element to identify headers and define the scope of the header for each data cell;
 * OR, if this is a complex table with multiple rows or columns as headers, use the `id` attribute with the `<th>` element and the `headers` attribute with the `<td>` element to identify multiple headers for each data cell (e.g. `<td headers="h1 h2">`).
 

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
